{extend name="layout/base" /}
{block name="content"}
<div class="my-face">
    <div class="my-face-con">
        <div class="my-face-pic"><img src="{$user.avatar}"></div>
        <p>{$user.nickname}</p>
    </div>
</div>

<div class="personal-list">
    <ul>
        <li><a href="javascript:;" onclick="jQuery('.bind-mobile-box').show();" class="bind-mobile">绑定手机号<span class="fr red">{if condition="!empty($mobile)"}已{else/}未{/if}绑定</span></a>  </li>
    </ul>
    <ul>
        <li><a href="{:url('user/business')}">商家入驻</a></li>
        <li><a href="tel:{$site.phone}">联系我们</a></li>
        <li><a href="{:url('page/info', ['name' => 'help'])}">帮助中心</a></li>
        <li><a href="{:url('page/info', ['name' => 'platform'])}">平台介绍</a></li>
    </ul>
</div>

<div class="bind-mobile-box">
    <div class="box1">
        <form class="bindmobile" action="{:url('user/bindmobile')}">
            <h2>绑定手机号</h2>
            <div class="form-box">
                <div class="form-group">
                    <input type="text" name="mobile" id="mobile" class="form-control" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <input type="text" name="code" class="form-control codeinput" placeholder="请输入验证码">
                    <button type="button" class="getcode" id="getcode">获取验证码</button>
                </div>
            </div>
            <button type="submit" class="btn btn-default lg btn-block btn-submit ajax-post" target-form="bindmobile">提交</button>
        </form>
    </div>
</div>
{/block}
{block name="footer"}
{include file="common/footer" /}
{/block}
{block name="script"}
<script type="text/javascript">
    $(function() {
        var countdown=60;

        function settime(obj) {
            if (countdown == 0) {
                obj.attr("disabled", false).removeClass('disabled');
                obj.html("获取验证码");
                countdown = 60;
                return;
            } else {
                obj.attr("disabled", true).addClass('disabled');
                obj.html("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function() {
                settime(obj)
            },1000)
        }
        $('.bind-mobile-box').click(function() {
            $('.bind-mobile-box').hide();
            $('input[name=mobile]').val('');
            $('.ajax-post').attr('disabled', false).removeClass('disabled');
        })
        $(".box1").click(function() {
        	event.stopPropagation();
        });

        $('#getcode').click(function() {
            var _this = $(this);
            $.ajax({
				url: "{:url('ajax/sendcode')}",
				type: 'GET',
				data: {mobile: $('#mobile').val(), 'event': 'bindmobile'},
                success: function(res) {
                    if(res.code) {
                        settime(_this);
                    }
                    layui.use(['layer'], function(){
						var layer = layui.layer;
						layer.msg(res.msg);
					});
                }
			})
        })
    })
</script>
{/block}
